<template>
    <div style="margin-top: 60px;">
        <template>

            <div class="article_bar" style="background-color: #eeeeee;display: flex;align-items: center;justify-content: flex-start">
                <div>
                    <div class="title">文章标题：<input type="text" v-model="title" placeholder="请输入文章标题（5-20字）">
                        <el-button type="primary" @click="saveMd()"  style="margin-left: 10px;">文章发布</el-button></div>
                    <div class="description">文章描述：<input type="text" v-model="description" placeholder="请输入文章描述（100字以内）"></div>
                </div>
                <!--<div>文章描述：<input type="text"></div>-->
            </div>
            <mark-down @on-save="save" ref="md" @on-change="changeImg"
                       :theme="theme" :initialValue="initialValue"
                       :placeholderValue="placeholderValue"
                        :autoSave="autoSave"
            />

        </template>
    </div>
</template>

<script>

    // import MarkDown from 'vue-meditors'
    import $ from 'jquery'
    import MarkDown from 'vue-meditors'
    export default {
            name: "publish_article",
            components:{
                MarkDown
            },
            data(){
                return {
                    autoSave:false,
                    placeholderValue: "请输入文章内容",//placeholder的内容
                    initialValue: "",//，markdown默认值
                    theme: 'OneDark',//主题
                    skypegmwcn_article:this.$cloudbase.database().collection('skypegmwcn_article'),
                    title:'',
                    description:'',
                    cover:'1'
                }
            },
        created(){

            $('html,body').scrollTop(0)
        },
        mounted(){
            // let that = this
            // let config = {headers:{"Content-Type":"multipart/form-data"}}
            // $('.icon-img').click(function () {
            //     $('.img').click()
            //     // console.log(that)
            //     //
                // that.$axios.post('http://localhost:3002/upload').then(res=>{
                //         console.log(res)
                // }).catch(err=>{
                //     console.log(err)
                // })
            // })
        },
            methods: {
                saveMd() {
                    // console.log(this.initialValue)
                    // console.log(this.description)
                 this.$confirm('确定发布本文章？').then(()=>{
                     this.$refs.md.handleSave();
                    }).catch(()=>{
                     this.$message.success({
                         message:'取消发布',
                         center:true
                     })
                 })
                },
                save(content){
                    // console.log(this.$refs.md)
                    Date.prototype.Format = function (fmt) { //author: meizz
                        var o = {
                            "M+": this.getMonth() + 1, //月份
                            "d+": this.getDate(), //日
                            "h+": this.getHours(), //小时
                            "m+": this.getMinutes(), //分
                            "s+": this.getSeconds(), //秒
                            "q+": Math.floor((this.getMonth() + 3) / 3), //季度
                            "S": this.getMilliseconds() //毫秒
                        };
                        if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
                        for (var k in o)
                            if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
                        return fmt;
                    }
                    // console.log(content)
                    if(content.value.length<50){
                        this.$message.warning({
                            message:'文章长度请至少在50字符以上！',
                            center:true
                        })
                    }else if(this.title==''&&this.title.length<5){
                        this.$message.warning({
                            message:'文章标题不能为空且长度必须大于5',
                            center:true
                        })

                    }else{
                        if(this.cover==1){
                            this.cover='http://1.15.43.18:3002/images/article/aaaa.png'
                        }
                        this.skypegmwcn_article.add({
                            article:content.value,
                            title:this.title,
                            description:this.description,
                            date:(new Date()).Format("yyyy-MM-dd hh:mm:ss"),
                            cover:this.cover
                        })

                        this.$message.success({
                            message:'发布成功!',
                            center:true
                        })
                        // this.title=''
                        // this.description=''
                        // this.value=''
                    }


                    // console.log("原始内容:"+content.value);
                    // console.log("转义后的内容:"+content.html);
                    // console.log("主题theme:"+content.theme);
                },
                changeImg(files,callback){
                    if((files.files[0].size/1024)>4100){
                        this.$message.warning({
                            message:'文章图片不能大于2m！'
                        })
                        return ;
                    }
                    let file = files.files[0]
                    let param = new FormData()
                    param.append('file',file)
                    param.append('chunk',0)

                    this.$axios.post('http://1.15.43.18:3002/upload',param).
                    then(res=>{
                        callback(res.data)
                        this.cover=res.data
                    }).catch(err=>{
                        console.log(err)
                    })

                    // this.$axios.get('http://localhost:3002/book?id=2',param).
                    // then(res=>{
                    //         console.log(res)
                    // }).catch(err=>{
                    //     console.log(err)
                    // })
                }
            }
        }
</script>

<style scoped lang="stylus">
    .article_bar
        >div
            width: 100%;
            padding: 10px 20px;
            display: flex;
            flex-direction: column;
            align-items: flex-start;

            div
                font-weight:700
                width 100%
                height 30px
                line-height 30px
                display: flex
                margin 2px 0
                justify-content flex-start
                input
                    border-radius 10px;
                    width 80%
                    font-weight 500

    /*background-color: red;*/

    /*@import "`@/assets/css/component/apply.css";*/
</style>